<template>
	<div class="container">
		<navigationBar :transparent="true" title="Ta的资料"></navigationBar>
		<div class="content">
			<div class="bg">
				<div class="bg-wrap"></div>
				<image v-if="userData.backgroundImage" class="bg-img" :src="userData.backgroundImage" mode="aspectFill">
				</image>
				<div class="tui-box" :style="'padding-top: ' + (navigationBarHeight+20) + 'px;'">
					<div class="tui-header-center">
						<image :src="userData.avatar" class="tui-avatar" mode="aspectFill"></image>
						<div class="tui-info">
							<div class="tui-nickname">{{userData.nickname }}</div>
							<div class="tui-explain">
								账号ID：{{userData.id}}
							</div>
						</div>

					</div>
					<div class="nav-block-info">
						<div class="nav-item">
							<div class="left">
								<div class="txt">{{userData.introduction}}</div>
							</div>
						</div>
					</div>
				</div>
				<div class="edit-nav">
					<div class="left">
						<div class="edit-item">
							<div class="edit-item-name">{{userData.followCount || 0}}</div>
							<div class="edit-item-desc">关注</div>
						</div>
						<div class="edit-item">
							<div class="edit-item-name">{{userData.fansCount || 0}}</div>
							<div class="edit-item-desc">粉丝</div>
						</div>
						<div class="edit-item">
							<div class="edit-item-name">{{userData.favoriteCollectCount || 0}}</div>
							<div class="edit-item-desc">获赞与收藏</div>
						</div>
					</div>
					<div class="right">

						<div class="edit-btn" v-if="!userData.follow" @click="follow(userData.id)">关注</div>
						<div class="edit-btn" v-if="userData.follow" @click="$navSkin.toChat(userData.id)">发信息</div>

						<div class="edit-img" v-if="!userData.follow" @click="$navSkin.toChat(userData.id)">
							<image src="/static/icon/news-send2.png" mode="aspectFill"></image>
						</div>
						<div class="edit-img" v-if="userData.follow" @click="unfollow(userData.id)">
							<image src="/static/icons/follow2.png" mode="aspectFill"></image>
						</div>
					</div>
				</div>
			</div>

			<!-- 	<div class="nav-tab">
				<div :class="['nav-item',current == 0?'active':'']" @click="changeItem(0)">笔记</div>
				<div :class="['nav-item',current == 1?'active':'']" @click="changeItem(1)">收藏</div>
				<div :class="['nav-item',current == 2?'active':'']" @click="changeItem(2)">赞过</div>
			</div> -->
			<!-- <div class="open-tab">
				<div class="open-item active">公开.4</div>
				<div class="open-item">私密.0</div>
				<div class="open-item">草稿.0</div>
			</div> -->
			<div class="tui-product-list" v-show="current == 0">
				<listCard :list="list"></listCard>
			</div>
		</div>
	</div>
</template>

<script>
	import data from '@/js/my/personal/data.js';
	import methods from '@/js/my/personal/methods.js';
	import {
		mapState
	} from 'vuex';
	import navigationBar from '../../components/navigationBar.vue';
	import listCard from '@/components/list-card.vue';
	export default {
		data,
		methods,
		onLoad(e) {
			this.id = e.id
			// uni.showLoading({
			//     title: '加载中',
			// 	mask:true
			// });
			this.getPageList()
			this.getUserInfo()
		},
		onShow() {


		},
		onReachBottom() {
			this.getPageList()
		},
		onShareAppMessage: function(id) {
			return {
				path: '/pages/my/personal?id=' + this.id,
				success: function(res) {
					if (res.errMsg == 'shareAppMessage:ok') {}
				},
			}
		},
		onHide() {},
		computed: {
			...mapState(['navigationBarHeight', 'userInfo']),
			bgHeight() {
				// #ifdef APP-PLUS
				return 250
				// #endif
				return this.navigationBarHeight + uni.upx2px(364);
			}
		},
		components: {
			navigationBar,
			listCard
		}
	};
</script>
<style>
	page,
	uni-page {
		background-color: #FAFAFA !important;
	}
</style>
<style scoped lang="scss">
	@import '~@/style/my/personal.scss';
</style>